<template>
	<view class="container">
		<!-- 顶部我的保险按钮 -->
		<view class="header">
			<button class="header-btn">我的保修</button>
		</view>

		<!-- 按钮列表 -->
		<view class="button-list">
			<button class="btn user-list" @click="toUserList()">用户列表</button>
			<button class="btn add-user" @click="toUserInsert()">新增用户</button>
			<button class="btn delete-user" @click="toUserList()">删除用户</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			toUserList() {
				uni.navigateTo({
					url: '/pages/userManage/userManage',
				});
			},
			
			toUserInsert(){
				uni.navigateTo({
					url: '/pages/userManage/addUser',
				});
			},

		},
	};
</script>

<style scoped>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		/* 确保子元素可以使用绝对定位 */
	}

	/* 顶部标题样式 */
	.header {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 距离顶部 10px */
		right: 10px;
		/* 距离右侧 10px */
	}

	/* 我的保险按钮样式 */
	.header-btn {
		font-size: 14px;
		color: #007aff;
		border: 1px solid #007aff;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: transparent;
		cursor: pointer;
		transition: all 0.3s;
	}

	/* 鼠标悬停效果 */
	.header-btn:hover {
		background-color: #007aff;
		color: white;
	}

	/* 按钮列表样式 */
	.button-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		align-items: center;
		margin-top: 50px;
		/* 避免按钮与顶部重叠 */
	}

	/* 按钮通用样式 */
	.btn {
		width: 80%;
		text-align: center;
		padding: 15px;
		border-radius: 10px;
		color: white;
		font-size: 16px;
		font-weight: bold;
		border: none;
		cursor: pointer;
	}

	/* 不同按钮的背景色 */
	.user-list {
		background-color: #b2d6ff;
		/* 蓝色背景 */
	}

	.add-user {
		background-color: #d9e8a8;
		/* 浅绿色背景 */
	}

	.delete-user {
		background-color: #e3d3f4;
		/* 浅紫色背景 */
	}
</style>